<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				width: 400px;
				height: 250px;
				border: 1px solid #000;
				background-color: antiquewhite;
				/* overflow: hidden; */
				position: absolute;
				top: 50px;
				left: 650px;
			}
			img{
				position: absolute;
			}
			#img1{
				/* display: inline-block; */
				/* position: absolute; */
				right: 0px;
			}
			#img2{
				/* display: inline-block; */
				/* position: absolute; */
				right: -400px;
			}
			#img3{
				/* display: inline-block; */
				right: -800px;
			}
			#btn-up{
				width: 30px;
				height: 30px;
				line-height: 27px;
				position:absolute;
				top: 100px;
				right: 355px;
			}
			#btn-down{
				width: 30px;
				height: 30px;
				line-height: 27px;
				position:absolute;
				top: 100px;
				right: 15px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<img src="img/1.jpg" id="img1">
			<img src="img/2.jpg" id="img2">
			<img src="img/3.jpg" id="img3">
			
			<button type="button" id="btn-up">《</button>
			<button type="button" id="btn-down">》</button>
		</div>
			
		
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("#btn-up").on("click",function(){
					var s = setInterval(function(){
						$("#img1").animate({ 
							"right":"+=400px",
						},200);
						$("#img2").animate({
							"right":"+=400px"
						},200);
						$("#img3").animate({
							"right":"+=400px"
						},200);
						clearInterval(s);
					},10);
					if($("#img1").css("right")=="800px"){
						$("#img1").css("right","-400px");
						$("#img2").css("right","0px");
						$("#img3").css("right","400px");
					};
				});
				$("#btn-down").on("click",function(){
					var b = setInterval(function(){
						$("#img1").animate({
							"right":"-=400px"
						},200);
						$("#img2").animate({
							"right":"-=400px"
						},200);
						$("#img3").animate({
							"right":"-=400px"
						},200);
						clearInterval(b);
					},10);
					if($("#img3").css("right")=="-400px"){
						$("#img1").css("right","400px");
						$("#img2").css("right","0px");
						$("#img3").css("right","-400px");
					};
				});
			});
		</script>
	</body>
</html>
